@keyframes jinru{
	0%{
		transform:translate(-190px,-200px) rotate(0deg);
		opacity:0;		
	}
	3%{
		transform:translate(-170px,0px) rotate(36deg);
		opacity:0.6;
	}
	6%{
		transform:translate(-140px,-30px) rotate(72deg);
		opacity:0.8;
	}
	9%{
		transform:translate(-110px,-0px) rotate(108deg);
		opacity:1;
	}
	30%{
		transform:translate(0px,0px) rotate(360deg);
		opacity:0;
	}
	60%{
		transform:rotateY(0deg);
		opacity:0;
	}
	80%{
		transform:rotateY(180deg);
		opacity:0.5;		
	}
	100%{
		transform:rotateY(360deg);
		opacity:1;		
	}
}


/* skew(10deg,5deg) ease-out*/
.q1d{animation:jinru 3.5s linear;}
.q2d{animation:jinru 3.5s linear 1.05s;}
.q3d{animation:jinru 3.5s linear 2.1s;}
.q4d{animation:jinru 3.5s linear 3.15s;}
.q5d{animation:jinru 3.5s linear 4.2s;}
.q6d{animation:jinru 3.5s linear 5.25s;}
.q7d{animation:jinru 3.5s linear 6.3s;}

.q8d{animation-fill-mode:forwards;}
#zzq ul li{
	opacity:0;
}
/* @keyframes jinru{
	0%{
		transform:translate(-190px,-200px) rotate(0deg);
		opacity:0;		
	}
	10%{
		transform:translate(-170px,0px) rotate(36deg);
		opacity:0.6;
	}
	20%{
		transform:translate(-140px,-30px) rotate(72deg);
		opacity:0.8;
	}
	30%{
		transform:translate(-110px,-0px) rotate(108deg);
		opacity:1;
	}
	100%{
		transform:translate(0px,0px) rotate(360deg);
		opacity:0;
	}
}
@keyframes chuxian{
	0%{
		transform:rotateY(0deg);
		opacity:0;		
	}
	50%{
		transform:rotateY(180deg);
		opacity:0.5;		
	}
	100%{
		transform:rotateY(360deg);
		opacity:1;		
	}
}

.q1d{animation:jinru 1s linear,chuxian 1s linear 1.5s;}
.q2d{animation:jinru 1s linear 1s,chuxian 1s linear 2.5s;}
.q3d{animation:jinru 1s linear 2s,chuxian 1s linear 3.5s;}
.q4d{animation:jinru 1s linear 3s,chuxian 1s linear 4.5s;}
.q5d{animation:jinru 1s linear 4s,chuxian 1s linear 5.5s;}
.q6d{animation:jinru 1s linear 5s,chuxian 1s linear 6.5s;}
.q7d{animation:jinru 1s linear 6s,chuxian 1s linear 7.5s;} */